<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
    <link rel="stylesheet" href="style.css" />
    <script type="text/javascript" src="jquery.min.js"></script>
<style>
body,html {
    margin: 0;
    padding: 0;
    /*font: 12px/1.5 arial;*/
    height: 100%;
}

#content {
    min-height: 100%;
    _height: 100%;
    position: relative;
}

#main {
    
    /* 20px(font-size)x2(line-height) + 10px(padding)x2=60px*/
    padding-bottom: 235px;
    
}

#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
}
</style>
</head>
<body>
    <div id="content">
        <div style=" ">
            <div id="xheader">
            	
            </div>
        </div>
        <div style="">
            <div id="xnav"></div>
        </div>
        <div style="">
            <div id="xworkrpt"></div>
        </div>
        
        <div id="main" style="">
            <div style="position: relative; float: left; ">
                <div id="xleft_nav">xleft</div>
            </div>
            <div id="center" style="position: relative; float: right; width:1000px">
                <div id="xportal"></div>
            </div>
            <div style="clear: both;"></div>
        </div>
        <div id="footer" style="">
            <div id="xfooter" style=""></div>
        </div>

    </div>
</body>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">

 $(document).ready(function(){
    $('#xheader').load('header_2.html');
    $('#xnav').load('nav.html');
    $('#xworkrpt').load('workreporting.html');
    $('#xleft_nav').load('left_nav.html');
    $('#xportal').load('portal_o.html');
    $('#xfooter').load('footer.html');
 });
</script>

</html>